<script setup lang="ts">

const props = defineProps({
  pics:String,
  username:String,
  ext:String
})
</script>

<template>
  <div class="w-full max-w-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
    <div class="flex justify-end px-4 pt-4">
    </div>
    <div class="flex flex-col items-center pb-10">
      <img class="w-24 h-24 mb-3 rounded-full shadow-lg" :src="props.pics" alt="Bonnie image"/>
      <h5 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">{{props.username}}</h5>
      <span class="text-sm text-gray-500 dark:text-gray-400">{{props.ext}}</span>
    </div>
  </div>

</template>

<style scoped>

</style>